import React from 'react';
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
  Box,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
} from '@mui/material';

interface Order {
  _id: string;
  username: string;
  quantity: number;
  totalPrice: number;
  status: 'completed' | 'cancelled';
  createdAt: string;
}

interface MovieOrderListProps {
  open: boolean;
  onClose: () => void;
  movieTitle: string;
  orders: Order[];
}

const MovieOrderList: React.FC<MovieOrderListProps> = ({
  open,
  onClose,
  movieTitle,
  orders,
}) => {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="md"
      fullWidth
      PaperProps={{
        sx: {
          background: 'linear-gradient(135deg, #2c3e50 0%, #3498db 100%)',
          color: 'white',
          borderRadius: '16px',
        }
      }}
    >
      <DialogTitle sx={{
        borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
        background: 'rgba(0, 0, 0, 0.2)'
      }}>
        {movieTitle} - 订单列表
      </DialogTitle>
      <DialogContent sx={{ mt: 2 }}>
        {orders && orders.length > 0 ? (
          <TableContainer sx={{
            background: 'rgba(255, 255, 255, 0.05)',
            borderRadius: '8px',
            '& .MuiTableCell-root': {
              color: 'white',
              borderColor: 'rgba(255, 255, 255, 0.1)',
            },
            '& .MuiTableRow-root:hover': {
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
            },
          }}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>订单ID</TableCell>
                  <TableCell>用户名</TableCell>
                  <TableCell align="right">购买数量</TableCell>
                  <TableCell align="right">总价</TableCell>
                  <TableCell>状态</TableCell>
                  <TableCell>下单时间</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {orders.map((order) => (
                  <TableRow key={order._id}>
                    <TableCell>{order._id}</TableCell>
                    <TableCell>{order.username}</TableCell>
                    <TableCell align="right">{order.quantity}张</TableCell>
                    <TableCell align="right">¥{order.totalPrice.toFixed(2)}</TableCell>
                    <TableCell>
                      <Box sx={{
                        display: 'inline-block',
                        px: 2,
                        py: 0.5,
                        borderRadius: '4px',
                        bgcolor: order.status === 'completed' ? 'rgba(46, 125, 50, 0.1)' : 'rgba(211, 47, 47, 0.1)',
                        color: order.status === 'completed' ? '#4caf50' : '#f44336'
                      }}>
                        {order.status === 'completed' ? '已完成' : '已取消'}
                      </Box>
                    </TableCell>
                    <TableCell>
                      {new Date(order.createdAt).toLocaleString('zh-CN')}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        ) : (
          <Typography variant="body1" sx={{ textAlign: 'center', color: 'rgba(255, 255, 255, 0.7)' }}>
            暂无订单数据
          </Typography>
        )}
      </DialogContent>
      <DialogActions sx={{ borderTop: '1px solid rgba(255, 255, 255, 0.1)', background: 'rgba(0, 0, 0, 0.2)' }}>
        <Button onClick={onClose} sx={{ color: 'white' }}>
          关闭
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default MovieOrderList;